//globl transition css

/*fade*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/*fade*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

@keyframes rotate {
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes move {
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  25%{
    -webkit-transform:rotate(4deg);
    transform:rotate(4deg);
  }
  50% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  75% {
    -webkit-transform:rotate(-4deg);
    transform:rotate(-4deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
}

@keyframes cloudMove {
  0%{
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
  }
}

@keyframes clickMove {
  0%{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  25%{
    -webkit-transform: translate(20px, 20px);
    transform: translate(20px, 20px);
  }
  50%{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  75%{
    -webkit-transform: translate(20px, 20px);
    transform: translate(20px, 20px);
  }
  100%{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes autoScale{
  0%{
    transform: scale(1);
  }
  15% {
    transform: scale(0.7);
  }
  30%{
    transform: scale(1)
  }
  70%{
    transform: scale(1)
  }
  85%{
    transform: scale(0.7)
  }
  100%{
    transform: scale(1)
  }
}
